import React, { Component } from 'react'
import axios from "axios"
import List from '../component/List'
import Page from '../component/Page'
export class Home extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       list:[],
       page:0,
       newArr:[],
       pagss:[]
    }
  }
 
  componentDidMount() { 
    const {page}=this.state
    axios.get("/list").then((res)=>{
      let total= Math.ceil(res.data.length/10)
      console.log(total)
      this.setState({
        list:res.data,
        newArr:res.data.slice(page*10,(page+1)*10),
        pagss:Array.from({length:total})
      })

    })
   }
   onchangePage(index){
    this.setState({
      page:index,
      newArr:this.state.list.slice(index*10,(index+1)*10),
    })
  }
  onprevpage(){
    let {page}=this.state
    page--
    this.setState({
      page,
      newArr:this.state.list.slice(page*10,(page+1)*10),
    })
  }
  onnext(){
    let {page}=this.state
    page++
    this.setState({
      page,
      newArr:this.state.list.slice(page*10,(page+1)*10),
    })

  }
  render() {
    const {newArr,pagss,page}=this.state
    return (
      <div>
        <List newArr={newArr}></List>
        <Page pagss={pagss} page={page} 
          onchangePage={
          this.onchangePage.bind(this)
          }
          onprevpage={this.onprevpage.bind(this)}
          onnext={this.onnext.bind(this)}
          ></Page>

      </div>
    )
  }
}

export default Home